<!-- 
 底部弹出层
 
 
 -->

<template>
	 <view v-if="show">
	    <!-- 遮罩层 -->
		<view class="mask" @click="onClose" ></view>   
	    <!-- 底部弹出层 -->
	    <view class="popup" :style="{height: height + 'rpx'	}">
	      <slot></slot>
	    </view>
		
	  </view>
</template>

<script>
export default {
	name:"popup",
	props: {
		show: {
		  type: Boolean,
		  default: false
		},
		height: {
		  type: Number,
		  default: 400
		}
	},
	methods: {
		onClose() {
		  this.$emit('update:show', false)
		}
	}
}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

}
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1000;
  border-radius: 20rpx 20rpx 0 0 ;
  overflow: hidden;
}
</style>